第23节 Bootstrap5下拉菜单组件用法

下拉菜单（Dropdowns）和表单里面的下拉列表（Select）具有很多外观上的相似性，但却有着本质的不同，下拉列表使用的是Select表单，而下拉菜单（Dropdowns）使用的是div和css实现。

下拉列表是可切换的上下文覆盖，用于显示链接列表等。它们与附带的Bootstrap 下拉JavaScript插件交互。它们是通过点击来切换的，而不是通过悬停来切换的；这是一个有意的设计决定，如果你需要悬停切换，可以通过js实现。

将下拉菜单的切换（按钮或链接）和下拉菜单包装在dropdown中就变成了下拉菜单。

可以从a或button元素触发下拉列表，以更好地满足您的潜在需求。这里显示的示例在适当的地方使用语义ul元素，但是支持自定义标记。

任何单个.btn都可以变成一个下拉切换，并有一些标记更改。下面是如何将它们与button元素一起使用：

两种菜单从外观和体验上看是没有任何区别的。

按钮组就是同一行中同时存在几个按钮，默认情况下，由于菜单默认是独占一行的，两个菜单靠在一起不美观，故上面的例子加了几个换行。

按钮组的使用十分简单，直接把按钮的换成，并不是把单个按钮放在一个按钮组容器中，这点一定要注意。

默认情况下，点击按钮任何区域，都会弹出下拉菜单，但是通过往添加dropdown-toggle-split以在下拉插入符号做适当间隔，这插入符号的两边水平padding减少了25%，并移除了为常规按钮下拉菜单添加的margin-left。这些额外的变化使插入符号集中在分割按钮中，并在主按钮旁边提供适当的空间。

分割按钮只能用于按钮组，只有点击按钮上的三角符号，下拉菜单才会弹出，点按钮其他地方都不在弹出。 下面代码第一个是普通按钮，第二个是分割按钮

将或者加到button按钮类中，就可以实现按钮大小的设置，虽然例子中用的是按钮组，但对单个按钮和分割按钮同样适用。 下面是三种按钮大小比较：

注意：后面一般情况下，为了节俭代码，对于不需要弹出选项的菜单都省略菜单部分。

下拉菜单的颜色与按钮的颜色完全一致，以下是各种颜色的下拉菜单：

选择较暗的下拉菜单以匹配深色导航栏或自定义样式，方法是将dropdown-menu-dark添加到现有的dropdown-menu。不需要更改下拉项。

下拉菜单默认的选项默认是向下弹出的，通过在下拉菜单的容器中添加dropup、dropstart、dropend，可以分别设置向上、向左、向右弹出。

这几个类的用法很简单，直接加在容器上即可。需要注意的是，这几个方向设置都是在空间足够情况下说的，如果向上弹出，但是上面空间不够，则会自动改为向下弹出。向左、向右也是如此

在过去下拉菜单内容必须是个链接，但Bootstrap5不再是这样。现在您可以选择在下拉菜单中使用button元素，而不是仅使用a。

也可以使用dropdown-item文本创建非交互式下拉项。您可以随意使用自定义CSS或文本工具进一步设计样式。默认情况下，使用链接和按钮选项，鼠标悬停在选项上会有阴影，文本选项五阴影效果。

将active添加到下拉列表中的项以将其设置为活动样式。 将disabled添加到下拉列表中的项以将其样式设置为禁用。

默认情况下，下拉菜单自动定位在距父菜单顶部100%的位置，并沿父菜单的左侧。你可以将dropdown-menu-end添加到dropdown-menu以右对齐下拉菜单。

如果要使用响应式对齐，请通过在button添加 data-bs-display="static"属性禁用动态定位，并使用响应式变量类。 在dropdown-menu添加dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end。

这个在lg断点前左对齐，断点后右对齐，比较简单就不演示了，提供完整代码，有兴趣的试一下。

将表单放入下拉菜单中，或将其放入下拉菜单中，然后使用边距或填充实用程序为其提供所需的负空间。

限于篇幅，本文对下拉菜单做了简要介绍，一般情况下足够平常的使用了，如果你需要更详细的了解下拉菜单用法，请参考Bootstrap中文文档 >组件 >下拉菜单相关章节。

今天的课程就到这里，请关注我，及时学习 俺老刘原创的《Bootstrap5零基础到精通》第24节 Bootstrap5分页导航Pagination组件用法，从字面也可以看出，按钮组就是多个按钮的组合。

如果这篇文章对你有帮助，记得随手点赞哦！